<template>
  <div class="app-container home">
    <div class="main" v-if="flag">
      <!-- <div class="header">
        <img src="../assets/images/top.png" alt="" srcset="" />
      </div> -->
      <div class="content">
        <div class="left">
          <chart></chart>
          <!-- <salesRanking /> -->
          <newAni />
          <salesTrend />
        </div>
        <div class="center">
          <div class="header-center">
            <div class="label">实时销售情况额/元</div>
            <div class="value">{{ rbstateFormat(Number(salesVolume) * dictValue) }}</div>
          </div>
        </div>
        <div>
          <mapChart />
        </div>

        <div class="right">
          <div class="put-total">
            <div class="title">累计设备投放总数</div>
            <div class="total">
              <div class="num">{{ rbstateFormat(Number(total) * dictValue) }}</div>
              <div class="label">设备数量</div>
            </div>
          </div>
          <div class="point-ranking">
            <div class="title">点位销售排行</div>
            <div class="table">
              <div class="table-header">
                <div class="th" style="width: 38px"> 排行 </div>
                <div class="th" style="width: 66px"> 区域 </div>
                <div class="th" style="width: 220px"> 点位 </div>
                <div class="th" style="width: 100px"> 销售额 </div>
                <div class="th" style="width: 100px"> 销量 </div>
              </div>
              <view class="table-body">
                <view v-for="(item, index) in dataList" :key="item.positionId">
                  <view
                    class="table-item"
                    style="display: flex; justify-content: space-around; text-align: center"
                  >
                    <div class="value num" style="width: 38px">{{ index + 1 }}</div>
                    <div class="value area" style="width: 66px">{{ item.areaName }}</div>
                    <el-tooltip
                      effect="light"
                      :disabled="item.toolip"
                      :content="item.positionName"
                      placement="top"
                    >
                      <div class="value table-name" style="width: 220px">{{
                        item.positionName
                      }}</div></el-tooltip
                    >
                    <div class="value sales" style="width: 100px">{{ item.price * dictValue }}</div>
                    <div class="value sales" style="width: 100px">{{ item.count * dictValue }}</div>
                  </view>
                </view>
              </view>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <img src="../assets/images/bottom.png" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import chart from './statistic/chart.vue'
import salesTrend from './statistic/salesTrend.vue'
import newAni from './statistic/newAni.vue'
import mapChart from './statistic/mapChart.vue'
import { salesRankingApi, salesRealtimeApi, totalDeployedApi } from '@/api/statistic/index'
import { rbstateFormat } from '@/utils/tools'
import { listDataApi } from '@/api/system/dict/data'

import usePermissionStore from '@/store/modules/permission'
const version = ref('1.0.1')

function goTarget(url) {
  window.open(url, '__blank')
}

const dataList = ref([])
const total = ref(0)
const salesVolume = ref(0)

function isTextOverflowing(element) {
  return element?.scrollWidth > element?.offsetWidth
}
const updateChart = () => {
  listDataApi({ dictType: 'bg_data_screen' }).then((res) => {
    if (res?.rows?.length) {
      dictValue.value = res?.rows[0].dictValue
      localStorage.setItem('dictValue', dictValue.value)
    }
  })
  totalDeployedApi().then((res) => {
    total.value = res?.data || 0
  })
  salesRealtimeApi().then((res) => {
    salesVolume.value = res?.data || 0
    console.log('salesVolume.value', salesVolume.value)
  })
  salesRankingApi().then((res) => {
    dataList.value = res?.data || []
    nextTick(() => {
      const doms = document.getElementsByClassName('table-name')
      dataList.value.forEach((item, index) => {
        if (isTextOverflowing(doms[index])) {
          // console.log('文本溢出')
          item.toolip = false
          // 处理溢出的文本，例如显示工具提示或者进行其他操作
        } else {
          // console.log('文本未溢出')
          item.toolip = true
        }
      })
    })
  })
}
onActivated(() => {
  flag.value = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (flag.value) {
    updateChart()
  }
})
const dictValue = ref(1)
const flag = ref(false)
const timer = ref(null)
onMounted(() => {
  flag.value = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (flag.value) {
    updateChart()
    timer.value = setInterval(() => {
      updateChart()
    }, 10000)
  }
})

onDeactivated(() => {
  clearInterval(timer.value)
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
.home {
  padding: 0;
  .header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background: transparent;
    img {
      height: 90px;
      min-width: 1400px;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    background: transparent;
    img {
      height: 84px;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    padding: 0 80px 70px;
    min-width: 1400px;
    background-image: url('../assets/images/index-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .left-img,
    .right-img {
      width: 168px;
    }
    .left {
      z-index: 2;
      .com-chart {
        width: 25vw;
        height: 500px;
        position: relative;
        padding: 30px 0;
      }
    }
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.main {
  background: transparent;
  position: relative;
  min-width: 1400px;
  // min-height: 800px;
  background-image: url('../assets/images/home-bg.png');
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
@font-face {
  font-family: 'DIN-Black';
  src:
    url('../assets/fonts/DIN-Black.woff2') format('woff2'),
    url('../assets/fonts/DIN-Black.woff') format('woff'),
    url('../assets/fonts/DIN-Black.ttf') mat('truetype');
}
@font-face {
  font-family: 'HelveticaExtObl-Normal';
  src:
    url('../assets/fonts/DIN-Black.woff2') format('woff2'),
    url('../assets/fonts/HelveticaExtObl-Normal.woff') format('woff'),
    url('../assets/fonts/HelveticaExtObl-Normal.ttf') mat('truetype');
}
@font-face {
  font-family: 'HYLingXinTiJ';
  src:
    url('../assets/fonts/HYLingXinTiJ.woff2') format('woff2'),
    url('../assets/fonts/HYLingXinTiJ.woff') format('woff'),
    url('../assets/fonts/HYLingXinTiJ.ttf') mat('truetype');
}
.center {
  min-width: 1400px;
  flex-shrink: 0;
  position: absolute;
  top: 156px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 2;
  .header-center {
    width: 824px;
    background-image: url('../assets/images/header-center-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 55px;
    background-position: center 55px;
    margin: 0 auto;
    .label {
      font-family: 'HelveticaExtObl-Normal';
      font-weight: bold;
      font-size: 21px;
      color: #ffffff;
      line-height: 25px;
      text-align: center;
    }
    .value {
      font-family: 'DIN-Black';
      font-weight: bold;
      font-size: 58px;
      color: #ffffff;
      line-height: 68px;
      text-align: center;
      font-style: italic;
    }
  }
}
.right {
  z-index: 2;
  flex-shrink: 0;
  .title {
    padding-right: 40px;
    width: 332px;
    height: 38px;
    color: #fff;
    font-family: 'HarmonyOS Sans SC';
    font-size: 20px;
    font-weight: bold;
    line-height: 38px; /* 92.308% */
    background-image: url('../assets/images/title-r-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 33px;
    text-align: right;
  }
  .put-total {
    margin-top: 138px;
    display: flex;
    flex-direction: column;
    align-items: end;
    .total {
      width: 281px;
      height: 100px;
      border-radius: 0px 0px 0px 0px;
      background-image: url('../assets//images/r-total-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 26px 0 20px 145px;
      .num {
        font-family: 'DIN-Black';
        font-weight: 400;
        font-size: 30px;
        color: #0bf9fe;
        line-height: 35px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .label {
        font-size: 11px;
        color: #ffffff;
        line-height: 12px;
        margin-top: 7px;
      }
    }
  }
  .point-ranking {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: end;
    .table {
      width: 560px;
      height: 500px;
      overflow-y: auto;
      line-height: 45px;
      font-size: 19px;
      color: #ffffff;
      text-align: center;
      scrollbar-width: 0;
      .table-header {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 10px;
        justify-content: space-between;
      }
      .table-body {
        .item {
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .value {
          flex-shrink: 0;
        }
        .table-name,
        .sales,
        .area {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .value {
          flex-shrink: 0;
        }
      }
    }
  }
}
::-webkit-scrollbar {
  display: none; /* 对于Chrome, Safari和Opera */
}
</style>
